$(function () {
    //定义一个全局变量
    let query = {
        pagenum: 1,    // 是int 页码值
        pagesize: 5,   // 是int 每页显示数据量
        cate_id: '',    // 是string 文章分类的id
        state: '',      // 是string 文章状态,可选 发布/草稿
    }

    //需求1:展示文章列表
    let layer = layui.layer
    initArticleList()
    //封装成函数,后面的分页/筛选/删除会用到
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: query,
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            //console.log(res.data)
            //TODO:成功后,渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                  <tr>
                  <td>${ele.title}</td>
                  <td>${ele.cate_name}</td>
                  <td>${dateFormat(ele.pub_date)}</td>
                  <td>${ele.state}</td>
                  <td>
                    <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs ">编辑</a>
                    <button data-id=${ele.Id} class="btn-delete layui-btn layui-btn-xs layui-btn-danger">
                      删除
                    </button>
                  </td>
                </tr>
                
                `)

            })

            //赋值
            $('tbody').empty().html(arr.join(''))
            pageRender(res.data.total)
        })
    }
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        axios({
            method: "GET",
            url: "/my/article/cates",
        }).then((res) => {
            //判断
            //console.log(res.data);
            if (res.data.status) {
                return layer.msg(res.data.message);
            }
            //成功获取后,赋值渲染
            let arr = [`<option value="">请选择文章类别</option>`];
            res.data.data.forEach(function (ele) {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `);
            });
            //赋值
            let str = arr.join("");
            $("[name=cate_id]").empty().html(str);
            //form表单同步渲染
            form.render();
        });
    }

    //需求3: 筛选
    $("#formSearch").on('submit', function (e) {
        e.preventDefault()
        //修改分类和状态两个参数
        query.cate_id = $("[name=cate_id]").val();
        query.state = $('[name=state]').val();
        //重新调用文章列表初始化方法
        initArticleList()
    })

    //需求4: 分页
    var laypage = layui.laypage;
    function pageRender(total) {
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: query.pagesize,//每页显示多条
            curr: query.pagenum,  //当前页

            //配置定制化分页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            linit: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj 包含了当前分页的所有参数 比如:
                //console.log(obj.curr)  //当前页数
                //console.log(obj.limit) //的大每页显示条数

                //首次不执行
                if (!first) {
                    query.pagenum = obj.curr;
                    query.pagesize = obj.limit
                    //重新渲染
                    initArticleList()

                }
            }

        });
    }

    //需求5: 删除
    $("tbody").on('click', '.btn-delete', function () {
        //在弹出层外面获取id,因为在弹出层里面 this 指向会改变
        let id = $(this).attr('data-id')


        //弹出层
        layer.confirm('删了,老弟?', { icon: 3, title: '提示' }, function (index) {
            //do something

            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message)
                }
                //成功提示
                layer.msg(res.data.message)

                //如果当前页面只剩1条数据,而且删除成功,那么 query.pagenum 自减
                // if ($('.btn-delete').length == 1 && query.pagenum >= 2) {
                //     query.pagenum--
                // }

                //优化写法:
                $(".btn-delete").length == 1 && query.pagenum >= 2 && query.pagenum--


                //重新渲染页面
                initArticleList()
            })

            layer.close(index);
        });
    })

})